<template>
  <div class="dashboard-page" @click="clearOptions">
    <div class="date-time-area">
      <div class="time-area">{{ timeStr }}</div>
      <div class="date-area">{{ dateStr }}</div>
    </div>
    <img class="dashboard-bg" :src="$utils.getIconByTheme(`dashboard/background@2x.png`)" />
    <div class="dashboard-page-title">南通500kV变检仓库管理平台</div>
    <!-- <img class="dashboard-page-title" :src="$utils.getIconByTheme(`dashboard/page-title@2x.png`)" /> -->
    <!-- 中间内容展示区域，使用绝对定位布局，上下通过padding缩进 -->
    <div class="content-area">
      <!-- 左边内容区域25% -->
      <div class="left-area">
        <div class="table-area">
          <div class="item-title">
            <img class="dashboard-bg" :src="$utils.getIconByTheme(`dashboard/item-title@2x.png`)" />
            <span class="item-title-text">实时库存统计</span>
          </div>
          <div class="flex-auto table-content no-overflow">
            <img class="dashboard-bg" :src="$utils.getIconByTheme(`dashboard/item-table-bg@2x.png`)" />
            <div class="flex-column column-center flex-auto kucun-chat-area">
              <div class="left-top-item">
                <img class="dashboard-bg" :src="$utils.getIconByTheme(`dashboard/left-top-item-bg@2x.png`)" />
                <div class="flex-row column-center">
                  <div class="left-top-item-icon">
                    <img class="dashboard-bg" :src="$utils.getIconByTheme(`dashboard/left-top-item1-icon@2x.png`)" />
                  </div>
                  <div class="left-top-item-name">
                    {{ realtimeKucun.repair && realtimeKucun.repair.teamGroupName || '修试组' }}
                  </div>
                  <div class="flex-auto flex-row flex-between left-top-item-value-item">
                    <div class="flex-auto flex-column column-center cursor-pointer"
                      @click="openUrl('http://192.168.0.220:7066/#/tools/realTime')">
                      <span class="left-top-item-value">
                        {{ realtimeKucun.repair && realtimeKucun.repair.tool || 0 }}
                      </span>
                      <span class="left-top-item-label">仪器仪表(工器具)</span>
                    </div>
                    <div class="flex-auto flex-column column-center cursor-pointer"
                      @click="openUrl('http://192.168.0.220:7066/#/menities/inventory')">
                      <span class="left-top-item-value">
                        {{ realtimeKucun.repair && realtimeKucun.repair.parts || 0 }}
                      </span>
                      <span class="left-top-item-label">备品备件</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="left-top-item">
                <img class="dashboard-bg" :src="$utils.getIconByTheme(`dashboard/left-top-item-bg@2x.png`)" />
                <div class="flex-row column-center">
                  <div class="left-top-item-icon">
                    <img class="dashboard-bg" :src="$utils.getIconByTheme(`dashboard/left-top-item2-icon@2x.png`)" />
                  </div>
                  <div class="left-top-item-name bottom-color">
                    {{ realtimeKucun.guard && realtimeKucun.guard.teamGroupName || '继保组' }}
                  </div>
                  <div class="flex-auto flex-row flex-between left-top-item-value-item">
                    <div class="flex-auto flex-column column-center cursor-pointer"
                      @click="openUrl('http://192.168.0.220:7066/#/tools/realTime')">
                      <span class="left-top-item-value">
                        {{ realtimeKucun.guard && realtimeKucun.guard.tool || 0 }}
                      </span>
                      <span class="left-top-item-label bottom-color">仪器仪表(工器具)</span>
                    </div>
                    <div class="flex-auto flex-column column-center cursor-pointer"
                      @click="openUrl('http://192.168.0.220:7066/#/menities/inventory')">
                      <span class="left-top-item-value">
                        {{ realtimeKucun.guard && realtimeKucun.guard.parts || 0 }}
                      </span>
                      <span class="left-top-item-label bottom-color">备品备件</span>
                    </div>
                  </div>
                </div>
              </div>
              <!-- <div class="flex-auto flex-column column-center kucun-chat">
                <div class="flex-auto full-width kucun-chat-item">
                  <div class="kucunchat-bg"></div>
                  <div class="kucunchat-dot"></div>
                  <div ref="xiushiKucunChat" style="width: 136px; height: 100%"></div>
                </div>
                <div class="kucun-chat-name">{{ kucunData.group1.teamGroupName }}</div>
              </div>
              <div class="flex-auto flex-column column-center kucun-chat">
                <div class="flex-auto full-width kucun-chat-item">
                  <div class="kucunchat-bg"></div>
                  <div class="kucunchat-dot"></div>
                  <div ref="biandianKucunChat" style="width: 136px; height: 100%"></div>
                </div>
                <div class="kucun-chat-name">{{ kucunData.group2.teamGroupName }}</div>
              </div> -->
            </div>
          </div>
        </div>
        <div class="table-area">
          <div class="item-title cursor-pointer" @click="openUrl('http://192.168.0.220:7066/#/tools/warranty?type=1')">
            <img class="dashboard-bg" :src="$utils.getIconByTheme(`dashboard/item-title@2x.png`)" />
            <span class="item-title-text">仪器仪表检验预警明细</span>
          </div>
          <div class="table-content">
            <img class="dashboard-bg" :src="$utils.getIconByTheme(`dashboard/item-table-bg@2x.png`)" />
            <div class="table-title">
              <div style="flex: 1" class="table-text">物资名称</div>
              <div style="flex: 1" class="table-text">仪器编号</div>
              <!-- <div style="flex: 1" class="table-text">历史检测</div> -->
              <div style="flex: 1" class="table-text">下次检验时间</div>
              <div class="table-text text-right material-column">检测周期</div>
              <div class="table-text text-right material-column">状态</div>
            </div>
            <div class="table-value-area" id="yujingdatalist">
              <div v-for="(item, index) in yujingList" :key="index" class="table-value">
                <div style="flex: 1" class="table-text value green" :title="item.class">{{ item.class }}</div>
                <div style="flex: 1" class="table-text value blue" :title="item.code">{{ item.code }}</div>
                <div style="flex: 1" class="table-text value">{{ item.date }}</div>
                <div class="table-text value material-column text-center">{{ item.duration }}</div>
                <div class="table-text value material-column text-right"
                  :class="{ warning: String(item.status) === '临期', error: String(item.status) === '超期' }">
                  {{ item.status }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="table-area">
          <div class="item-title cursor-pointer" @click="openUrl('http://192.168.0.220:7066/#/tools/warranty?type=2')">
            <img class="dashboard-bg" :src="$utils.getIconByTheme(`dashboard/item-title@2x.png`)" />
            <span class="item-title-text">仪器仪表待报废/报修明细</span>
          </div>
          <div class="table-content">
            <img class="dashboard-bg" :src="$utils.getIconByTheme(`dashboard/item-table-bg@2x.png`)" />
            <div class="table-title">
              <div class="table-text group-item">类型</div>
              <div class="table-text group-item">班组</div>
              <div class="table-text class-item">物资名称</div>
              <div class="table-text text-right material-column">物资数量</div>
            </div>
            <div class="table-value-area" id="baoxiudatalist">
              <div v-for="(item, index) in baoxiuList" :key="index" class="table-value">
                <div class="table-text group-item">{{ item.status }}</div>
                <div class="table-text group-item value green" :title="item.group">{{ item.group }}</div>
                <div class="table-text class-item value blue" :title="item.class">{{ item.class }}</div>
                <div class="table-text value material-column text-center">{{ item.count }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 中间内容区域50% -->
      <div class="flex-column full-height middle-area">
        <div class="middle-chat">
          <img class="dashboard-bg" :src="$utils.getIconByTheme(`dashboard/middle-chat-bg@2x.png`)" />
          <div class="middle-chat-title">库房业务情况</div>
          <div class="middle-chat-top">
            <div class="flex-row">
              <div class="filter-option" @click="refrehMiddleChat('day')">近期
                <img class="dashboard-bg"
                  :src="$utils.getIconByTheme(`dashboard/filter-option-bg${middleChatDataType === 'day' ? '-active' : ''}@2x.png`)" />
              </div>
              <div class="filter-option" @click="refrehMiddleChat('month')">近一月
                <img class="dashboard-bg"
                  :src="$utils.getIconByTheme(`dashboard/filter-option-bg${middleChatDataType === 'month' ? '-active' : ''}@2x.png`)" />
              </div>
              <div class="filter-option" @click="refrehMiddleChat('year')">近一年
                <img class="dashboard-bg"
                  :src="$utils.getIconByTheme(`dashboard/filter-option-bg${middleChatDataType === 'year' ? '-active' : ''}@2x.png`)" />
              </div>
              <div class="filter-option arrow" @click.stop="showYear = !showYear; showMonth = false;">{{ selectedYear ?
                `${selectedYear}年` : '未选择' }}
                <img class="dashboard-bg"
                  :src="$utils.getIconByTheme(`dashboard/filter-option-bg${middleChatDataType === 'custome' ? '-active' : ''}@2x.png`)" />
                <div v-if="showYear" class="select-area">
                  <img class="dashboard-bg" :src="$utils.getIconByTheme(`dashboard/selecte-bg@2x.png`)" />
                  <div class="select-list">
                    <div v-for="(item, index) in yearList" :key="index" class="select-item" @click="chooseYear(item)">{{
                      item }}</div>
                  </div>
                </div>
              </div>
              <div class="filter-option arrow" @click.stop="showMonth = !showMonth; showYear = false;">{{ selectedMonth ?
                `${selectedMonth}月` : '未选择' }}
                <img class="dashboard-bg"
                  :src="$utils.getIconByTheme(`dashboard/filter-option-bg${middleChatDataType === 'custome' ? '-active' : ''}@2x.png`)" />
                <div v-if="showMonth" class="select-area">
                  <img class="dashboard-bg" :src="$utils.getIconByTheme(`dashboard/selecte-bg@2x.png`)" />
                  <div class="select-list">
                    <div class="select-item" @click="chooseMonth('0月')">不选</div>
                    <div v-for="(item, index) in monthList" :key="index" class="select-item" @click="chooseMonth(item)">{{
                      item }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="flex-auto flex-row column-center flex-center">
              <div class="midddle-chat-item flex-row column-center">
                <div class="middle-chat-icon">
                  <img class="dashboard-bg" :src="$utils.getIconByTheme(`dashboard/middle-chat-icon-left@2x.png`)" />
                </div>
                <div class="flex-column middle-chat-value-area">
                  <div class="middle-chat-label">仪器仪表(工器具)业务数</div>
                  <div class="middle-chat-value">{{ middleChatNumber.left }}</div>
                </div>
              </div>
              <div class="midddle-chat-item flex-row column-center">
                <div class="middle-chat-icon">
                  <img class="dashboard-bg" :src="$utils.getIconByTheme(`dashboard/middle-chat-icon-right@2x.png`)" />
                </div>
                <div class="flex-column middle-chat-value-area">
                  <div class="middle-chat-label">备品备件业务数</div>
                  <div class="middle-chat-value">{{ middleChatNumber.right }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="middle-chat-bottom">
            <img class="dashboard-bg" :src="$utils.getIconByTheme(`dashboard/middle-chat-data-bg@2x.png`)" />
            <div ref="middleChat" style="width: 100%; height: 100%"></div>
          </div>
        </div>
        <div class="middle-bottom flex-auto">
          <div class="item-title">
            <img class="dashboard-bg" :src="$utils.getIconByTheme(`dashboard/middle-item-title@2x.png`)" />
            <span class="item-title-text">货位使用率</span>
          </div>
          <div class="flex-auto flex-row middle-pie-area">
            <img class="dashboard-bg" :src="$utils.getIconByTheme(`dashboard/middle-pie-bg@2x.png`)" />
            <div v-for="(item, index) in usedRateList" :key="index"
              class="full-height flex-auto flex-column column-center pie-item">
              <div class="pie-data">
                <!-- <img class="dashboard-bg" :src="$utils.getIconByTheme(`dashboard/pie-data@2x.png`)" /> -->
                <!-- 波浪效果元素 设置了一个css变量  -->
                <div class="progress-right" :style="`--progress: ${item.percentInteger}%`"></div>
                <!-- 波浪效果元素 设置了一个css变量  -->
                <div class="progress-left" :style="`--progress: ${item.percentInteger}%`"></div>
                <div class="pie-data-top">
                  <span>{{ item.percentInteger }}</span>
                  <span class="pie-data-decimal" v-if="item.percentDecimal">.</span>
                  <span class="pie-data-decimal">{{ item.percentDecimal }}</span>
                  <span v-if="item.percentInteger">%</span>
                </div>
                <div class="pie-data-bottom">已用：{{ item.countSmall }}</div>
              </div>
              <div class="pie-title">
                <span class="pie-title-text">{{ item.materialSmall }}</span>
                <img class="dashboard-bg" :src="$utils.getIconByTheme(`dashboard/pie-title@2x.png`)" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 右边内容区域25% -->
      <div class="right-area">
        <div class="flex-auto flex-column table-area">
          <div class="item-title">
            <img class="dashboard-bg" :src="$utils.getIconByTheme(`dashboard/item-title@2x.png`)" />
            <span class="item-title-text">仪器仪表(工器具)借用归还统计</span>
          </div>
          <div class="flex-auto table-content no-overflow">
            <img class="dashboard-bg" :src="$utils.getIconByTheme(`dashboard/item-table-bg@2x.png`)" />
            <div class="flex-auto flex-column column-center jieyong-chat-area">
              <div class="full-width flex-auto flex-row column-center jieyong-chat-item">
                <img class="jieyong-chat-bg" :src="$utils.getIconByTheme(`dashboard/jieyong-chat-bg-empty@2x.png`)" />
                <div class="flex-auto flex-row column-center flex-right">
                  <div class="jieyong-rate blue">
                    <span>{{ guihuantongji.borrow && guihuantongji.borrow.modifyPercentage }}</span>
                    <span class="jieyong-rate-decimal"
                      v-if="guihuantongji.borrow && guihuantongji.borrow.modifyPercentageDecimal">.</span>
                    <span class="jieyong-rate-decimal">{{ guihuantongji.borrow &&
                      guihuantongji.borrow.modifyPercentageDecimal }}</span>
                    <span v-if="guihuantongji.borrow && guihuantongji.borrow.modifyPercentage">%</span>
                  </div>
                  <div class="jieyong-value-area-left">
                    <div class="text-center">修试组</div>
                    <div class="text-center">{{ guihuantongji.borrow && guihuantongji.borrow.modifyNum }}</div>
                  </div>
                </div>
                <div class="jieyong-label">
                  <div ref="jieyongChat" style="width: 70px; height: 70px;"></div>
                </div>
                <div class="flex-auto flex-row column-center">
                  <div class="jieyong-value-area-right">
                    <div>继保组</div>
                    <div class="text-center">{{ guihuantongji.borrow && guihuantongji.borrow.powerNum }}</div>
                  </div>
                  <div class="jieyong-rate green">
                    <span>{{ guihuantongji.borrow && guihuantongji.borrow.powerPercentage }}</span>
                    <span class="jieyong-rate-decimal"
                      v-if="guihuantongji.borrow && guihuantongji.borrow.powerPercentageDecimal">.</span>
                    <span class="jieyong-rate-decimal">{{ guihuantongji.borrow &&
                      guihuantongji.borrow.powerPercentageDecimal }}</span>
                    <span v-if="guihuantongji.borrow && guihuantongji.borrow.powerPercentage">%</span>
                  </div>
                </div>
              </div>
              <div class="full-width flex-auto flex-row column-center jieyong-chat-item">
                <img class="jieyong-chat-bg" :src="$utils.getIconByTheme(`dashboard/jieyong-chat-bg-empty@2x.png`)" />
                <div class="flex-auto flex-row column-center flex-right">
                  <div class="jieyong-rate blue">
                    <span>{{ guihuantongji.still && guihuantongji.still.modifyPercentage }}</span>
                    <span class="jieyong-rate-decimal"
                      v-if="guihuantongji.still && guihuantongji.still.modifyPercentageDecimal">.</span>
                    <span class="jieyong-rate-decimal">{{ guihuantongji.still &&
                      guihuantongji.still.modifyPercentageDecimal }}</span>
                    <span v-if="guihuantongji.still && guihuantongji.still.modifyPercentage">%</span>
                  </div>
                  <div class="jieyong-value-area-left">
                    <div>修试组</div>
                    <div class="text-center">{{ guihuantongji.still && guihuantongji.still.modifyNum }}</div>
                  </div>
                </div>
                <div class="jieyong-label">
                  <div ref="guihuanChat" style="width: 70px; height: 70px;"></div>
                </div>
                <div class="flex-auto flex-row column-center">
                  <div class="jieyong-value-area-right">
                    <div>继保组</div>
                    <div class="text-center">{{ guihuantongji.still && guihuantongji.still.powerNum }}</div>
                  </div>
                  <div class="jieyong-rate green">
                    <span>{{ guihuantongji.still && guihuantongji.still.powerPercentage }}</span>
                    <span class="jieyong-rate-decimal"
                      v-if="guihuantongji.still && guihuantongji.still.powerPercentageDecimal">.</span>
                    <span class="jieyong-rate-decimal">{{ guihuantongji.still &&
                      guihuantongji.still.powerPercentageDecimal }}</span>
                    <span v-if="guihuantongji.still && guihuantongji.still.powerPercentage">%</span>
                  </div>
                </div>
              </div>
              <div class="flex-row full-width flex-center group-name-area">
                <div class="flex-row column-center group-name-item">
                  <div class="square-item blue-bg"></div>
                  <span class="group-name blue">修试组</span>
                </div>
                <div class="flex-row column-center group-name-item">
                  <div class="square-item green-bg"></div>
                  <span class="group-name green">继保组</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="flex-auto flex-column table-area">
          <div class="item-title cursor-pointer"
            @click="openUrl('http://192.168.0.220:7066/#/tools/borrowVoucher?type=1')">
            <img class="dashboard-bg" :src="$utils.getIconByTheme(`dashboard/item-title@2x.png`)" />
            <span class="item-title-text">仪器仪表(工器具)待归还明细</span>
          </div>
          <div class="table-content">
            <img class="dashboard-bg" :src="$utils.getIconByTheme(`dashboard/item-table-bg@2x.png`)" />
            <div class="table-title">
              <div class="table-text group-item">班组</div>
              <div class="table-text class-item">物资名称</div>
              <div class="table-text text-right material-column">物资数量</div>
            </div>
            <div class="table-value-area" id="guihuandatalist">
              <div v-for="(item, index) in daihuanList" :key="index" class="table-value">
                <div class="table-text group-item value green" :title="item.group">{{ item.group }}</div>
                <div class="table-text class-item value blue" :title="item.class">{{ item.class }}</div>
                <div class="table-text value material-column text-center">{{ item.count }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="flex-auto flex-column table-area">
          <div class="item-title">
            <img class="dashboard-bg" :src="$utils.getIconByTheme(`dashboard/item-title@2x.png`)" />
            <span class="item-title-text">{{ rateTitle }}设备使用率</span>
          </div>
          <div class="flex-auto table-content rate-table">
            <img class="dashboard-bg" :src="$utils.getIconByTheme(`dashboard/item-table-bg@2x.png`)" />
            <div v-if="false" class="rate-table-area">
              <img class="dashboard-bg" :src="$utils.getIconByTheme(`dashboard/device-rate-bg-top@2x.png`)" />
              <span class="rate-table-title-text">仪器仪表(工器具)</span>
              <div class="table-value-area flex-auto">
                <div v-for="(item, index) in useRateList.toolCase" :key="index" class="rate-list-area">
                  <div class="flex-row column-center">
                    <div class="index-bg" :class="rateClasses[index] || ''">{{ index + 1 }}</div>
                    <div class="flex-auto flex-row column-bottom">
                      <div class="flex-coloumn flex-auto">
                        <div class="item-name">{{ item.name }}</div>
                        <div class="flex-auto progress-item">
                          <div class="progress-item-value" :style="{ width: `${item.progress}%` }"></div>
                        </div>
                      </div>
                      <div class="progress-item-text">{{ `${item.progress}%` }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div v-if="false" class="rate-table-area">
              <img class="dashboard-bg" :src="$utils.getIconByTheme(`dashboard/device-rate-bg-bottom@2x.png`)" />
              <span class="rate-table-title-text">备品备件</span>
              <div class="table-value-area flex-auto">
                <div v-for="(item, index) in useRateList.partsCase" :key="index" class="rate-list-area">
                  <div class="flex-row column-center">
                    <div class="index-bg" :class="rateClasses[index] || ''">{{ index + 1 }}</div>
                    <div class="flex-auto flex-row column-bottom">
                      <div class="flex-coloumn flex-auto">
                        <div class="item-name">{{ item.name }}</div>
                        <div class="flex-auto progress-item">
                          <div class="progress-item-value" :style="{ width: `${item.progress}%` }"></div>
                        </div>
                      </div>
                      <div class="progress-item-text">{{ `${item.progress}%` }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="table-value-area">
              <div v-for="(item, index) in useRateList[rateKey]" :key="index" class="rate-list-area large">
                <div class="flex-row column-center">
                  <div class="index-bg" :class="rateClasses[index] || ''">{{ index + 1 }}</div>
                  <div class="item-name">{{ item.name }}</div>
                </div>
                <div class="flex-row column-center">
                  <div class="flex-auto progress-item">
                    <div class="progress-item-value" :style="{ width: `${item.progress}%` }"></div>
                  </div>
                  <div class="progress-item-text">{{ `${item.progress}%` }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import api from '../api/index.js';

export default {
  name: 'DashboardPage',
  components: {},
  data() {
    return {
      selectedYear: new Date().getFullYear(),
      selectedMonth: 0,
      showYear: false,
      yearList: [],
      showMonth: false,
      monthList: [],
      daihuanList: [],
      baoxiuList: [],
      yujingList: [],
      useRateList: {
        toolCase: [],
        partsCase: []
      },
      dateStr: '',
      timeStr: '',
      rateClasses: ['first', 'second', 'third'],
      listConfig: {
        guihuandatalist: {
          dataLoading: false,
          pageInfo: {
            pageNum: 1,
            pageSize: 10
          },
          queryFunction: this.getWaitDetail
        },
        yujingdatalist: {
          dataLoading: false,
          pageInfo: {
            pageNum: 1,
            pageSize: 10
          },
          queryFunction: this.instrumentCaliWarning
        },
        baoxiudatalist: {
          dataLoading: false,
          pageInfo: {
            pageNum: 1,
            pageSize: 10
          },
          queryFunction: this.repairDetail
        },
      },
      kucunData: {
        group1: {
          teamGroupName: '',
          totalNum: 100,
          repertoryNum: 0
        },
        group2: {
          teamGroupName: '',
          totalNum: 100,
          repertoryNum: 0
        }
      },
      guihuantongji: {
        borrow: {
          totalNum: '', // 总数
          modifyNum: '', // 修试组
          modifyPercentage: '',
          modifyPercentageDecimal: '',
          powerNum: '', // 继保组(继保组)
          powerPercentage: '',
          powerPercentageDecimal: '',
        },
        still: {
          totalNum: '', // 总数
          modifyNum: '', // 修试组
          modifyPercentage: '',
          modifyPercentageDecimal: '',
          powerNum: '', // 继保组(继保组)
          powerPercentage: '',
          powerPercentageDecimal: '',
        },
      },
      usedRateList: [
        {
          materialSmall: '三基地1号库房',
          countSmall: 160,
          totalNum: 1529
        },
        {
          materialSmall: '三基地2号库房',
          countSmall: 250,
          totalNum: 2584
        },
        {
          materialSmall: '三基地3号库房',
          countSmall: 476,
          totalNum: 1554
        },
      ],
      middleChatNumber: {
        left: 0,
        right: 0
      },
      // day：近期
      // month：近期
      // year：近期
      // custome: 自定义年月
      middleChatDataType: 'day',
      // 实时库存
      realtimeKucun: {
        repair: {},
        guard: {},
      },
      rateTitle: '仪器仪表(工器具)',
      rateKey: 'toolCase',
    };
  },
  computed: {},
  created() {
    this.initTimer();
    clearInterval(this.timer);
    this.timer = setInterval(() => {
      this.initTimer();
    }, 1000);

    this.yearList = [];
    const lastYear = new Date().getFullYear();
    for (let i = 0; i < 10; i++) {
      this.yearList.push(`${lastYear - i}年`);
    }

    this.monthList = [];
    for (let i = 1; i <= 12; i++) {
      this.monthList.push(`${i}月`);
    }

    // 仪器仪表待归还明细
    this.daihuanList = [];
    this.listConfig.guihuandatalist.queryFunction(this.listConfig.guihuandatalist.pageInfo);

    // 仪器仪表检验预警明细
    this.yujingList = [];
    this.listConfig.yujingdatalist.queryFunction(this.listConfig.yujingdatalist.pageInfo);

    // 仪器仪表报废/报修明细
    this.baoxiuList = [];
    this.listConfig.baoxiudatalist.queryFunction(this.listConfig.baoxiudatalist.pageInfo);

    // 仪器仪表使用率
    this.useRateList = {
      toolCase: [],
      partsCase: []
    };
    this.getUsageRate();

    // 货位使用率
    this.usedRateList = [];
    this.getLocationUsageRate();

    // 实时库存统计
    this.realtimeKucun = {
      repair: {},
      guard: {},
    };
    this.getRealtimeKucun();
  },
  mounted() {
    // 仪器仪表库存统计---没有该数据，不再统计
    this.getToolRepertoryNum();
    this.initLoadMore();
    // 库房业务情况
    this.refrehMiddleChat('day');

    // 仪器仪表借用归还统计
    this.getGroupDetail();
    const container1 = document.querySelector('#yujingdatalist');
    const container2 = document.querySelector('#baoxiudatalist');
    const container3 = document.querySelector('#guihuandatalist');
    this.autoScroll([container1, container2, container3]);
  },
  beforeDestroy() {
    clearInterval(this.timer);
    clearInterval(this.rateInterval);
    clearInterval(this.scrollInterval);
    document.querySelector('#yujingdatalist').removeEventListener('mouseover', this.handleMouseover);
    document.querySelector('#baoxiudatalist').removeEventListener('mouseover', this.handleMouseover);
    document.querySelector('#guihuandatalist').removeEventListener('mouseover', this.handleMouseover);
    document.querySelector('#yujingdatalist').removeEventListener('mouseleave', this.handleMouseleave);
    document.querySelector('#baoxiudatalist').removeEventListener('mouseleave', this.handleMouseleave);
    document.querySelector('#guihuandatalist').removeEventListener('mouseleave', this.handleMouseleave);
    this.destroyLoadMore();
  },
  methods: {
    handleMouseover(e) {
      const targetId = e.target.id;
      this.isMouseOver[targetId] = true;
    },
    handleMouseleave(e) {
      const targetId = e.target.id;
      this.isMouseOver[targetId] = false;
    },
    autoScroll(elements) {
      clearInterval(this.scrollInterval);
      // 初始滚动位置
      this.scrollAmount = {};
      this.isMouseOver = {};
      for (let index in elements) {
        this.scrollAmount[elements[index].id] = 0;
        this.isMouseOver[elements[index].id] = false;
        elements[index].removeEventListener('mouseover', this.handleMouseover);
        elements[index].addEventListener('mouseover', this.handleMouseover);
        elements[index].removeEventListener('mouseleave', this.handleMouseleave);
        elements[index].addEventListener('mouseleave', this.handleMouseleave);
      }
      this.scrollInterval = setInterval(() => {
        for (let index in elements) {
          const element = elements[index];
          // 如果鼠标不在列表上，才进行滚动，否则不进行自动滚动
          if (!this.isMouseOver[element.id]) {
            this.scrollAmount[element.id] += 1; // 每次增加滚动的距离，可以根据需要调整速度和距离
            element.scrollTop = this.scrollAmount[element.id]; // 更新滚动位置
            if (this.scrollAmount[element.id] > element.scrollHeight - element.clientHeight) { // 如果到达底部，可以重置或停止滚动
              this.scrollAmount[element.id] = 0; // 重置为顶部，或者根据需要调整逻辑
            }
          }
        }
      }, 50); // 滚动间隔时间，单位为毫秒
    },
    openUrl(url) {
      window.open(url);
    },
    refreshRate() {
      clearInterval(this.rateInterval);
      this.rateInterval = setInterval(() => {
        this.rateKey = this.rateKey === 'toolCase' ? 'partsCase' : 'toolCase';
        this.rateTitle = this.rateKey === 'toolCase' ? '仪器仪表(工器具)' : '备品备件';
      }, 1000 * 30);
    },
    // 获取实时库存统计
    getRealtimeKucun() {
      api.getTRealInventoryStatistics().then(res => {
        if (res.code === 200) {
          const { repair, guard } = res;
          this.realtimeKucun = { repair, guard };
        }
      }).catch(e => {
        this.$log.error('实时库存统计查询失败，', e);
      });
    },
    clearOptions() {
      if (this.showYear) {
        this.showYear = false;
      }
      if (this.showMonth) {
        this.showMonth = false;
      }
    },
    setMiddleChat(data) {
      //  xAxisData: 横轴列表
      //  seriesData1： 仪器仪表业务数
      //  seriesData2： 备品备件业务数
      //  seriesData3： 修试组业务总数
      //  seriesData4： 继保组业务总数
      const xAxisData = [], seriesData1 = [], seriesData2 = [], seriesData3 = [], seriesData4 = [];
      for (const key in data) {
        xAxisData.push(key);
        seriesData1.push(data[key].toolTotal);
        seriesData2.push(data[key].partsTotal);
        seriesData3.push(data[key].repairTotal);
        seriesData4.push(data[key].guardTotal);
      }
      this.initMiddleChat(xAxisData, seriesData1, seriesData2, seriesData3, seriesData4);
    },
    // 近期库房业务情况(天)
    refrehMiddleChat(qeuryType = 'day', dateTime = '', middleChatDataType) {
      this.middleChatDataType = middleChatDataType || qeuryType;
      let response = null;
      switch (qeuryType) {
        case 'day':
          response = api.getWarehouseUseCaseByDay();
          break;
        case 'month':
          response = api.getWarehouseUseCaseByMonth({ dateTime });
          break;
        case 'year':
          response = api.getWarehouseUseCaseByYear({ dateTime });
          break;
      }
      if (!response) {
        return;
      }
      response.then(res => {
        if (res.code === 200) {
          this.middleChatNumber.left = res.operation.toolCase;
          this.middleChatNumber.right = res.operation.partsCase;
          this.setMiddleChat(res.pattern);
        }
      }).catch(e => {
        this.$log.error('近期库房业务情况查询失败，查询类型：', this.middleChatDataType, e);
      });
    },
    chooseYear(value) {
      this.selectedYear = Number(value.split('年')[0]);
      const queryType = this.selectedMonth ? 'month' : 'year';
      const dateTime = this.selectedMonth ? [this.selectedYear, this.selectedMonth].join('-') : this.selectedYear;
      this.refrehMiddleChat(queryType, dateTime, 'custome');
    },
    chooseMonth(value) {
      this.selectedMonth = Number(value.split('月')[0]);
      const queryType = this.selectedMonth ? 'month' : 'year';
      const dateTime = this.selectedMonth ? [this.selectedYear, this.selectedMonth].join('-') : this.selectedYear;
      this.refrehMiddleChat(queryType, dateTime, 'custome');
    },
    // 货位使用率
    getLocationUsageRate() {
      api.getLocationUsageRate().then(res => {
        if (res.code === 200) {
          this.usedRateList.push({
            ...res.S01,
            percentInteger: this.getDecimal(res.S01.percentage).integer,
            percentDecimal: this.getDecimal(res.S01.percentage).decimal
          });
          this.usedRateList.push({
            ...res.S02,
            percentInteger: this.getDecimal(res.S02.percentage).integer,
            percentDecimal: this.getDecimal(res.S02.percentage).decimal
          });
          this.usedRateList.push({
            ...res.S03,
            percentInteger: this.getDecimal(res.S03.percentage).integer,
            percentDecimal: this.getDecimal(res.S03.percentage).decimal
          });
        }
      }).catch(e => {
        this.$log.error('仪器仪表库存统计查询失败，', e);
      });
    },
    // 仪器仪表借用归还统计
    getGroupDetail() {
      api.getGroupDetail().then(res => {
        if (res.code === 200) {
          const { borrow, still } = res;
          this.guihuantongji = {
            borrow: {
              totalNum: Number(borrow.totalNum), // 总数
              modifyNum: Number(borrow.modifyNum), // 修试组
              modifyPercentage: this.getDecimal(borrow.modifyPercentage).integer,
              // modifyPercentageDecimal: this.getDecimal(borrow.modifyPercentage).decimal,
              powerNum: Number(borrow.powerNum), // 继保组(继保组)
              powerPercentage: this.getDecimal(borrow.powerPercentage).integer,
              // powerPercentageDecimal: this.getDecimal(borrow.powerPercentage).decimal,
            },
            still: {
              totalNum: Number(still.totalNum), // 总数
              modifyNum: Number(still.modifyNum), // 修试组
              modifyPercentage: this.getDecimal(still.modifyPercentage).integer,
              // modifyPercentageDecimal: this.getDecimal(still.modifyPercentage).decimal,
              powerNum: Number(still.powerNum), // 继保组(继保组)
              powerPercentage: this.getDecimal(still.powerPercentage).integer,
              // powerPercentageDecimal: this.getDecimal(still.powerPercentage).decimal,
            },
          };
          this.initTopChat('jieyongChat', this.guihuantongji.borrow.modifyPercentage, '借用');
          this.initTopChat('guihuanChat', this.guihuantongji.still.modifyPercentage, '归还');
        }
      }).catch(e => {
        this.$log.error('仪器仪表库存统计查询失败，', e);
      });
    },
    initTopChat(chatId, value, text) {
      const topChat = echarts.init(this.$refs[chatId]);
      const option = {
        title: {
          text: text,
          textStyle: {
            color: '#ffffff',
            fontSize: 17
          },
          left: 'center',
          top: '32%'
        },
        angleAxis: {
          max: 100,
          clockwise: false, // 逆时针
          // 隐藏刻度线
          show: false
        },
        radiusAxis: {
          type: 'category',
          show: true,
          axisLabel: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        polar: [
          {
            center: ['50%', '50%'],
            radius: '180%'
          }
        ],
        series: [
          {
            type: 'bar',
            data: [value],
            showBackground: true,
            polarIndex: 0,
            backgroundStyle: {
              color: '#0BFFA0',
              borderWidth: 5
            },
            coordinateSystem: 'polar',
            // roundCap: true,
            barWidth: 5,
            itemStyle: {
              normal: {
                opacity: 1,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#008BFF'
                  },
                  {
                    offset: 1,
                    color: '#0071FF'
                  }
                ]),
              }
            }
          }
        ]
      };
      topChat.setOption(option);
    },
    getDecimal(str) {
      // 处理各种百分比格式的健壮版本
      const robustPercentageRegex = /^(\d+)\.?(\d*)%$/;
      const match = str.match(robustPercentageRegex);
      if (!match) return {};

      return {
        integer: match[1],      // 整数部分
        decimal: match[2] || '' // 小数部分（可能为空）
      };
    },
    // 仪器仪表库存统计
    getToolRepertoryNum() {
      api.getToolRepertoryNum().then(res => {
        if (res.code === 200) {
          this.kucunData.group1 = res['repair'];
          this.kucunData.group2 = res['guard'];
          // 库存数据不通过仪表展示
          // this.initKucunChat('xiushiKucunChat', this.kucunData.group1.totalNum, this.kucunData.group1.repertoryNum);
          // this.initKucunChat('biandianKucunChat', this.kucunData.group2.totalNum, this.kucunData.group2.repertoryNum);
        }
      }).catch(e => {
        this.$log.error('仪器仪表库存统计查询失败，', e);
      });
    },
    // 仪器仪表使用率
    getUsageRate() {
      api.getUsageRate().then(res => {
        if (res.code === 200) {
          const data = res.records || { toolCase: [], partsCase: [] };
          this.useRateList.toolCase = this.useRateList.toolCase.concat(data.toolCase.map(item => {
            return {
              name: item.materialSmall,
              progress: Number(String(item.percentage).split('%')[0])
            }
          }));
          this.useRateList.partsCase = this.useRateList.partsCase.concat(data.partsCase.map(item => {
            return {
              name: item.materialSmall,
              progress: Number(String(item.percentage).split('%')[0])
            }
          }));
          this.refreshRate();
        }
      }).catch(e => {
        this.$log.error('仪器仪表使用率查询失败，', e);
      });
    },
    initLoadMore() {
      document.querySelector('#yujingdatalist').addEventListener('scroll', this.handleScroll);
      document.querySelector('#baoxiudatalist').addEventListener('scroll', this.handleScroll);
      document.querySelector('#guihuandatalist').addEventListener('scroll', this.handleScroll);
    },
    destroyLoadMore() {
      document.querySelector('#yujingdatalist').removeEventListener('scroll', this.handleScroll);
      document.querySelector('#baoxiudatalist').removeEventListener('scroll', this.handleScroll);
      document.querySelector('#guihuandatalist').removeEventListener('scroll', this.handleScroll);
    },
    handleScroll(e) {
      const target = e.target;
      const { scrollTop, scrollHeight, clientHeight } = target;
      const targetId = target.id;
      // 当鼠标在滚动区域上方时，滚动过程中，将滚动值赋值给自动滚动记录的值
      if (this.isMouseOver[targetId]) {
        this.scrollAmount[targetId] = scrollTop;
      }
      if (scrollTop + clientHeight >= scrollHeight) {
        // 如果当前表格数据正在加载，则不进行加载更多
        if (this.listConfig[targetId].dataLoading) {
          return;
        }
        this.listConfig[targetId].pageInfo.pageNum += 1;
        this.listConfig[targetId].queryFunction(this.listConfig[targetId].pageInfo, true);
      }
    },
    // 仪器仪表待归还明细
    getWaitDetail(pageInfo, loadMore) {
      this.listConfig.guihuandatalist.dataLoading = true;
      api.getWaitDetail(pageInfo).then(res => {
        this.listConfig.guihuandatalist.dataLoading = false;
        if (res.code === 200) {
          const data = res.records || [];
          // 如果查询的数据为空，并且当前操作是加载更多的情况下，则需要将页码重新设置回去
          if (!data.length && loadMore) {
            this.listConfig.guihuandatalist.pageInfo.pageNum -= 1;
          }
          this.daihuanList = this.daihuanList.concat(data.map(item => {
            return {
              group: item.teamGroupName,
              class: item.materialSmall,
              count: item.totalWaitNum
            }
          }));
        }
      }).catch(e => {
        this.listConfig.guihuandatalist.dataLoading = false;
        this.$log.error('仪器仪表待归还明细查询失败，', e);
      });
    },
    // 获取仪器仪表校验预警明细
    instrumentCaliWarning(pageInfo, loadMore) {
      this.listConfig.yujingdatalist.dataLoading = true;
      api.instrumentCaliWarning(pageInfo).then(res => {
        this.listConfig.yujingdatalist.dataLoading = false;
        if (res.code === 200) {
          const data = res.records || [];
          // 如果查询的数据为空，并且当前操作是加载更多的情况下，则需要将页码重新设置回去
          if (!data.length && loadMore) {
            this.listConfig.yujingdatalist.pageInfo.pageNum -= 1;
          }
          this.yujingList = this.yujingList.concat(data.map(item => {
            return {
              class: item.materialName,
              code: item.specs,
              date: item.nextCheckDate,
              duration: item.checkTime,
              status: item.status
            }
          }));
        }
      }).catch(e => {
        this.listConfig.yujingdatalist.dataLoading = false;
        this.$log.error('仪器仪表校验预警明细查询失败，', e);
      });
    },
    // 获取仪器仪表报废/报修明细
    repairDetail(pageInfo, loadMore) {
      this.listConfig.baoxiudatalist.dataLoading = true;
      api.repairDetail(pageInfo).then(res => {
        this.listConfig.baoxiudatalist.dataLoading = false;
        if (res.code === 200) {
          const data = res.records || [];
          // 如果查询的数据为空，并且当前操作是加载更多的情况下，则需要将页码重新设置回去
          if (!data.length && loadMore) {
            this.listConfig.baoxiudatalist.pageInfo.pageNum -= 1;
          }
          this.baoxiuList = this.baoxiuList.concat(data.map(item => {
            return {
              group: item.groupName,
              class: item.materialSmall,
              count: item.materialNum,
              status: item.status
            }
          }));
        }
      }).catch(e => {
        this.listConfig.baoxiudatalist.dataLoading = false;
        this.$log.error('仪器仪表报废/报修明细查询失败，', e);
      });
    },
    initTimer() {
      this.dateStr = this.$utils.dateFormat(new Date(), 'YYYY.m.d');
      this.timeStr = this.$utils.dateFormat(new Date(), 'HH:MM');
      // this.timeStr = this.$utils.dateFormat(new Date(), 'HH:MM:SS');
    },
    initKucunChat(key = 'xiushiKucunChat', totalStock = 800, inStock = 500) {
      const kucunChat = echarts.init(this.$refs[key]);
      const ringPercentage = 0.25; // 圆环完整度80%

      // 计算角度（80%的圆环，开口20%）
      const totalAngle = 360; // 完整圆
      const displayAngle = totalAngle * ringPercentage; // 显示的角度
      const gapAngle = totalAngle - displayAngle; // 缺口角度

      // 为了让开口朝下，计算起始和结束角度
      // 从底部中心开始，左右各分一半的缺口角度
      const startAngle = 90 + (gapAngle / 2); // （从右下开始）
      const endAngle = 90 - (gapAngle / 2);   // （到左下结束）

      const option = {
        series: [{
          name: '环形背景',
          type: 'pie',
          radius: ['60%', '90%'],
          center: ['50%', '62%'],
          startAngle: startAngle,
          endAngle: endAngle,
          silent: true,
          itemStyle: {
            color: '#00094e' // 圆环背景色
          },
          data: [{
            value: 100,
            name: '背景'
          }],
          label: { show: false },
          labelLine: { show: true }
        }, {
          name: '库存统计',
          type: 'pie',
          radius: ['60%', '90%'],
          center: ['50%', '62%'],
          startAngle: startAngle,
          endAngle: endAngle,

          // 数据：环形进度（在库数占比）
          data: [{
            value: inStock, // 在库数
            name: '在库数',
            itemStyle: {
              color: {
                type: 'linear',
                x: 0, y: 0, x2: 0, y2: 1,
                colorStops: [{
                  offset: 0, color: '#135584' // 起始颜色
                }, {
                  offset: 1, color: '#00FCFF' // 结束颜色
                }]
              },
            }
          }, {
            value: totalStock - inStock, // 剩余库存
            name: '',
            itemStyle: {
              color: 'transparent' // 透明，显示背景色
            }
          }],

          // 中心文字标签
          label: {
            show: true,
            position: 'center',
            formatter: [
              '{a|库存总数}',
              '{b|' + totalStock + '}'
            ].join('\n'),
            rich: {
              a: {
                fontSize: 14,
                color: '#38CEFF',
                lineHeight: 20,
                align: 'center',
                fontFamily: 'SourceHanSansCN'
              },
              b: {
                fontSize: 24,
                color: '#FFFFFF',
                fontWeight: '500',
                lineHeight: 30,
                align: 'center',
                letterSpacing: '1px',
                fontFamily: 'PangMenZhengDao'
              }
            }
          },

          emphasis: {
            disabled: true
          },
          select: {
            disabled: true
          },
          hoverAnimation: false,
          legendHoverLink: false
        }],

        // 在环形正上方添加在库数指示
        graphic: [{
          type: 'line',
          shape: {
            x1: '50%',
            y1: '15%',
            x2: '50%',
            y2: '25%'
          },
          style: {
            stroke: '#00FCFF',
            lineWidth: 1,
            lineDash: [3, 2]
          }
        }, {
          type: 'text',
          left: '30%',
          top: '0%',
          style: {
            text: '在库数：' + inStock,
            fontSize: 14,
            fill: '#00FCFF',
            textAlign: 'center',
            fontFamily: 'SourceHanSansCN',
            fontWeight: '500'
          },
          normal: {
            labelLine: {
              show: true,
              length: 10,   // 引导线第一段长度
              length2: 15,  // 引导线第二段长度
              smooth: true  // 平滑引导线
            },
          },
        }],

        tooltip: {
          show: false
        },

        animation: true,
        animationDuration: 1500,
        animationEasing: 'cubicOut'
      };
      kucunChat.setOption(option);
    },
    /**
     * xAxisData: 横轴列表
     * seriesData1： 仪器仪表业务数
     * seriesData2： 备品备件业务数
     * seriesData3： 修试组业务总数
     * seriesData4： 继保组业务总数
     */
    initMiddleChat(xAxisData = [], seriesData1 = [], seriesData2 = [], seriesData3 = [], seriesData4 = []) {
      // 基于准备好的dom，初始化echarts实例
      const middleChat = echarts.init(this.$refs.middleChat);
      const option = {
        // 让图表占满容器
        grid: {
          // show: true,
          // borderColor: '#C8C8C8',
          // borderWidth: 1.5,
          top: "40px",
          left: "60px",
          right: "40px",
          bottom: "30px"
        },
        tooltip: {
          trigger: 'axis'
        },
        toolbox: {
          show: false,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        calculable: true,
        legend: {
          textStyle: {
            color: '#ffffff',
            fontFamily: 'SourceHanSansSC, SourceHanSansSC',
            fontWeight: '400',
            fontSize: '12px',
          },
          itemWidth: 12,
          itemHeight: 12,
          x: 'left',
          y: 'top',
          data: ['仪器仪表业务数', '备品备件业务数', '修试组业务总数', '继保组业务总数']
        },
        xAxis: [
          {
            type: 'category',
            data: xAxisData,
            axisLabel: {
              textStyle: {
                color: '#ffffff',
              },
            },
            // 轴线样式（下边框）
            axisLine: {
              show: true,
              lineStyle: {
                color: '#F8F8F8', // 边框颜色
                width: 1.5       // 边框宽度
              }
            },
            // 纵向网格线配置
            splitLine: {
              show: true,
              lineStyle: {
                color: '#272b66',
                width: 1.5,
                type: 'solid'
              }
            },
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              formatter: '{value}',
              color: '#ffffff'
            },
            nameTextStyle: {
              color: '#ffffff',
            },
            // 轴线样式（左边框）
            axisLine: {
              show: true,
              lineStyle: {
                color: '#F8F8F8', // 边框颜色
                width: 1.5       // 边框宽度
              }
            },
            // 横向网格线（主要的横向标尺线）
            splitLine: {
              show: true,
              lineStyle: {
                color: '#272b66',
                width: 1.5,
                type: 'solid'
              }
            },
          }
        ],
        series: [
          {
            name: '仪器仪表业务数',
            type: 'line',
            data: seriesData1
          },
          {
            name: '备品备件业务数',
            type: 'line',
            data: seriesData2
          },
          {
            name: '修试组业务总数',
            type: 'bar',
            data: seriesData3,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#01F0FF' // 起始颜色
              }, {
                offset: 1,
                color: '#005559' // 结束颜色
              }])
            }
          },
          {
            name: '继保组业务总数',
            type: 'bar',
            data: seriesData4,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#39CEFF' // 起始颜色
              }, {
                offset: 1,
                color: '#2D48AD' // 结束颜色
              }])
            }
          },
        ]
      };
      middleChat.setOption(option);
    },
  }
};
</script>

<style lang="scss" scoped>
.dashboard-page {
  font-family: SourceHanSansSC;
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;

  .date-time-area {
    font-family: PangMenZhengDao;
    position: absolute;
    color: #ffffff;
    display: flex;
    align-items: flex-end;
    right: vw(60);
    top: vh(30);

    .time-area {
      font-size: vh(26);
      margin-right: vw(15);
    }

    .date-area {
      font-size: vh(16);
    }
  }

  .dashboard-page-title {
    font-family: DouYu;
    font-size: vh(32);
    font-weight: bold;
    position: absolute;
    width: 100%;
    text-align: center;
    top: vh(30);
    /* 创建从上到下的渐变背景 */
    background: linear-gradient(to bottom, #FFFFFF, #98EDFF);
    /* Safari 5.1-6.0 */
    background: -webkit-linear-gradient(top, #FFFFFF, #98EDFF);
    /* Opera 11.1-12.0 */
    background: -o-linear-gradient(top, #FFFFFF, #98EDFF);
    /* Firefox 3.6-15 */
    background: -moz-linear-gradient(top, #FFFFFF, #98EDFF);

    /* 将背景裁剪到文字 */
    -webkit-background-clip: text;
    background-clip: text;

    /* 设置文字颜色为透明 */
    -webkit-text-fill-color: transparent;
    color: transparent;

    /* 确保元素显示为块级或内联块 */
    display: inline-block;

    /* 添加后备颜色（不支持渐变的浏览器显示此颜色） */
    /* 底部颜色作为后备 */
    color: #98EDFF;
  }

  .dashboard-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
  }

  .content-area {
    flex: 1;
    margin: vh(93) vw(56) vh(70) vw(56);
    display: flex;
  }

  .jieyong-chat-area {
    color: #ffffff;

    .jieyong-chat-item {
      position: relative;
      // padding: 0 vw(6) 0 vw(6);

      .jieyong-chat-bg {
        position: absolute;
        width: vh(229);
        height: vh(90);
        z-index: -1;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }

      .jieyong-rate {
        font-family: PangMenZhengDao;
        font-size: vh(24);
        font-weight: 500;

        .jieyong-rate-decimal {
          font-size: vh(15);
        }
      }

      .jieyong-label {
        width: vw(120);
        padding-right: vw(4);
        font-family: PangMenZhengDao;
        font-size: vh(18);
        color: #FFFFFF;
        text-align: center;
        justify-items: center;
        font-style: normal;
        text-transform: none;
      }

      .jieyong-value-area-left {
        margin-left: vw(8);
        font-size: vh(13);
      }

      .jieyong-value-area-right {
        margin-right: vw(8);
        font-size: vh(13);
      }
    }

    .group-name-area {
      margin: vh(20) 0 vh(6) 0;
    }

    .group-name-item:first-child {
      margin-right: vw(22);
    }

    .square-item {
      height: vh(14);
      width: vh(14);
      border-radius: vh(4);
    }

    .group-name {
      margin-left: vw(12);
      font-size: vh(14);
    }

    .blue-bg {
      background-color: #2A88D1;
    }

    .green-bg {
      background-color: #0BFFA0;
    }

    .blue {
      color: #2A88D1;
    }

    .green {
      color: #0BFFA0;
    }
  }

  .kucun-chat-area {
    margin: 0 vw(5);

    .left-top-item {
      position: relative;
      width: vw(399);
      height: vh(85);
      padding: vh(8) vw(30);

      &:last-child {
        margin-top: vh(30);
      }

      .left-top-item-icon {
        position: relative;
        width: vh(58);
        height: vh(58);
      }

      .left-top-item-name {
        font-family: SourceHanSansCN;
        font-size: vh(18);
        color: #98C8FF;
        margin-left: vw(15);
      }

      .left-top-item-value-item {
        margin-left: vw(10);
      }

      .left-top-item-value {
        font-family: SourceHanSansCN;
        font-size: vh(28);
        font-weight: bold;
        color: #FFFFFF;
        transform: skewX(-10deg);
      }

      .left-top-item-label {
        font-family: SourceHanSansCN;
        font-size: vh(11);
        color: #98C8FF;
      }

      .bottom-color {
        color: #01ebf9;
      }
    }

    .kucun-chat-item {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .kucunchat-bg {
      position: absolute;
      bottom: 0;
      width: vh(142);
      height: vh(142);
      background-color: #001871;
      border-radius: 100%;
      box-shadow: 0px 0px 10px 5px #000827;
    }

    .kucunchat-dot {
      position: absolute;
      bottom: vh(20);
      height: vh(2);
      width: vw(24);
      background-color: #1c89bd;
      border-radius: vh(2);
      box-shadow: 0px 0px 6px 3px #0c5bef;
    }

    .kucun-chat {
      margin-right: vw(50);

      &:last-child {
        margin-right: 0;
      }
    }

    .kucun-chat-name {
      font-family: SourceHanSansSC;
      font-weight: 400;
      font-size: vh(14);
      color: #38CEFF;
      text-align: left;
      font-style: normal;
      text-transform: none;
      margin-top: vh(10);
    }
  }

  .rate-table {
    margin-top: vh(8) !important;

    .table-value-area {
      margin-top: 0 !important;
    }
  }

  .rate-list-area {
    color: #ffffff;
    padding: vh(0) vw(10);
    margin-bottom: vh(3);

    &:last-child {
      margin-bottom: 0;
    }

    .index-bg {
      position: relative;
      height: vh(15);
      width: vh(15);
      color: #ffffff;
      font-size: vh(10);
      line-height: vh(14);
      text-align: center;
      background-color: #3D8FFF;
      margin-right: vw(10);
      margin-top: vh(4);

      &::after {
        content: "";
        width: 0;
        height: 0;
        position: absolute;
        right: vw(-3);
        top: 50%;
        transform: translateY(-50%);
        border-radius: 2px;
        border-top: 3px solid transparent;
        /* 上边框 */
        border-bottom: 3px solid transparent;
        /* 下边框 */
        border-left: 3px solid #3D8FFF;
        /* 左边框，这里是三角形的高度和颜色 */
      }

      &.first {
        background-color: #FF3232;

        &::after {
          border-left-color: #FF3232;
        }
      }

      &.second {
        background-color: #FF9800;

        &::after {
          border-left-color: #FF9800;
        }
      }

      &.third {
        background-color: #FFD200;

        &::after {
          border-left-color: #FFD200;
        }
      }
    }

    .item-name {
      font-family: SourceHanSansSC;
      font-weight: 400;
      font-size: vh(11);
      color: #FFFFFF;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }

    .progress-item {
      position: relative;
      background-color: #0A337E;
      border-radius: vh(10);
      height: vh(8);
      margin-top: vh(3);
      margin-right: vw(10);

      .progress-item-value {
        position: absolute;
        left: 0;
        height: 100%;
        border-radius: vh(10);
        background: linear-gradient(to right, #53b1df, #2757c2);
      }
    }

    .progress-item-text {
      color: #42F7C4;
      width: vw(52);
      font-size: vh(14);
    }

    &.large {
      padding: vh(0) vw(20);
      margin-bottom: vh(6.5);

      &:last-child {
        margin-bottom: 0;
      }

      .index-bg {
        height: vh(18);
        width: vh(18);
        font-size: vh(12);
        margin-right: vw(15);

        &::after {
          right: vw(-4);
          border-top-width: 4px;
          /* 上边框 */
          border-bottom-width: 4px;
          /* 下边框 */
          border-left-width: 4px;
          /* 左边框，这里是三角形的高度和颜色 */
        }

        .item-name {
          font-size: vh(14);
        }

        .progress-item {
          height: vh(10);
          margin-top: vh(5);
        }

        .progress-item-text {
          font-size: vh(15);
          width: vw(48);
        }
      }
    }
  }


  .table-area {
    flex: 1;
    margin-bottom: vh(23);
    height: vh(290);
    display: flex;
    flex-direction: column;

    &:last-child {
      margin-bottom: 0;
    }

    .table-content {
      flex: 1;
      margin-top: vh(20);
      padding: 0 vw(10) vh(10) vw(10);
      position: relative;
      overflow-y: hidden;
      display: flex;
      flex-direction: column;
    }

    .rate-table-area {
      flex: 1;
      position: relative;
      margin-top: vh(6);
      display: flex;
      flex-direction: column;
      height: vh(110);
      padding: vh(14) 0 vh(6) 0;

      &:last-child {
        margin-top: vh(12);
      }

      .rate-table-title-text {
        position: absolute;
        font-family: SourceHanSansSC;
        font-size: vh(12);
        font-weight: 800;
        text-align: left;
        font-style: normal;
        transform: skewX(-10deg);
        line-height: vh(12);
        left: vw(47);
        top: vh(-7);
        /* 创建从上到下的渐变背景 */
        background: linear-gradient(to bottom, #FFFFFF, #98EDFF);
        /* Safari 5.1-6.0 */
        background: -webkit-linear-gradient(top, #FFFFFF, #98EDFF);
        /* Opera 11.1-12.0 */
        background: -o-linear-gradient(top, #FFFFFF, #98EDFF);
        /* Firefox 3.6-15 */
        background: -moz-linear-gradient(top, #FFFFFF, #98EDFF);

        /* 将背景裁剪到文字 */
        -webkit-background-clip: text;
        background-clip: text;

        /* 设置文字颜色为透明 */
        -webkit-text-fill-color: transparent;
        color: transparent;

        /* 确保元素显示为块级或内联块 */
        display: inline-block;

        /* 添加后备颜色（不支持渐变的浏览器显示此颜色） */
        /* 底部颜色作为后备 */
        color: #98EDFF;
      }
    }

    .table-title {
      background: rgba(26, 206, 255, 0.2);
      border: 1px solid rgba(26, 206, 255, 0.3);
      box-shadow: inset 0 0 18px rgba(26, 206, 255, 0.5);
      height: vh(30);
      padding: 0 vw(18);
      display: flex;
    }

    .group-item {
      flex: 1;
    }

    .class-item {
      flex: 2;
    }

    .table-text {
      font-family: SourceHanSansSC;
      font-weight: bold;
      font-size: vh(14);
      line-height: vh(28);
      color: #FFFFFF;
      text-align: left;
      font-style: normal;
      text-transform: none;
      background: radial-gradient(0deg, #98EDFF 0%, #FFFFFF 100%);
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;

      &.value {
        font-weight: 400;
      }

      &.material-column {
        width: vw(57);
        max-width: vh(57);
      }

      &.text-right {
        text-align: right;
      }

      &.text-center {
        text-align: center;
      }

      &.green {
        color: #0BFFA0;
      }

      &.blue {
        color: #1ACEFF;
      }

      &.error {
        color: #ff0000;
      }

      &.warning {
        color: #ff9900;
      }
    }

    .table-value-area {
      margin-top: vh(6);
      overflow-x: hidden;
      overflow-y: auto;

      &::-webkit-scrollbar {
        display: none;
        /* Safari and Chrome */
      }

      .table-value {
        margin-bottom: vh(4);
        padding: 0 vw(18);
        cursor: pointer;
        display: flex;

        &:nth-child(odd) {
          background-color: rgba(26, 206, 255, 0.2);
        }

        &:nth-child(even) {
          background-color: rgba(26, 206, 255, 0.1);
        }

        &:last-child {
          margin-bottom: 0;
        }

        &:hover {
          background-color: rgba(26, 206, 255, 0.4);
        }
      }
    }
  }

  .middle-chat-title {
    font-family: SourceHanSansSC, SourceHanSansSC;
    font-weight: 800;
    font-size: vh(32);
    line-height: vh(34);
    text-align: center;
    font-style: normal;
    text-transform: none;
    margin: vh(28) vw(58) vh(0) vw(58);
    /* 创建从上到下的渐变背景 */
    background: linear-gradient(to bottom, #FFFFFF, #98EDFF);
    /* Safari 5.1-6.0 */
    background: -webkit-linear-gradient(top, #FFFFFF, #98EDFF);
    /* Opera 11.1-12.0 */
    background: -o-linear-gradient(top, #FFFFFF, #98EDFF);
    /* Firefox 3.6-15 */
    background: -moz-linear-gradient(top, #FFFFFF, #98EDFF);

    /* 将背景裁剪到文字 */
    -webkit-background-clip: text;
    background-clip: text;

    /* 设置文字颜色为透明 */
    -webkit-text-fill-color: transparent;
    color: transparent;

    /* 确保元素显示为块级或内联块 */
    display: inline-block;

    /* 添加后备颜色（不支持渐变的浏览器显示此颜色） */
    /* 底部颜色作为后备 */
    color: #98EDFF;
  }

  .select-area {
    position: relative;
    height: vh(60);
    width: vw(68);
    margin-top: vh(6);
    overflow-y: auto;

    .select-list {
      height: 100%;
      width: 100%;
      overflow-y: auto;

      &::-webkit-scrollbar {
        display: none;
        /* Safari and Chrome */
      }
    }

    .select-item {
      height: vh(20);
      line-height: vh(20);

      &:hover {
        background: linear-gradient(to top, #53b0dfc9, #2758c2c9);
      }
    }
  }

  .middle-chat-top {
    display: flex;
    flex-direction: column;
    margin: vh(15) vw(58) vh(20) vw(58);
    flex: 1;

    .filter-option {
      width: vw(68);
      height: vh(28);
      line-height: vh(25);
      position: relative;
      margin-right: 2px;
      font-family: SourceHanSansCN;
      font-weight: 500;
      font-size: vh(13);
      color: #FFFFFF;
      text-align: center;
      font-style: normal;
      text-transform: none;
      cursor: pointer;

      &.arrow::after {
        content: "";
        width: 0;
        height: 0;
        position: absolute;
        right: vw(5);
        top: vh(9);
        border-radius: 2px;
        border-top: 4px solid transparent;
        /* 上边框 */
        border-bottom: 4px solid transparent;
        /* 下边框 */
        border-left: 6px solid #FFFFFF;
        /* 左边框，这里是三角形的高度和颜色 */
      }

      &:last-child {
        margin-right: 0;
      }
    }

    .midddle-chat-item {
      margin-right: vw(40);

      &:last-child {
        margin-right: 0;
      }

      .middle-chat-icon {
        position: relative;
        width: vh(156);
        height: vh(130);
      }

      .middle-chat-value-area {
        height: vh(130);
        padding-top: vh(20);
      }

      .middle-chat-label {
        font-family: SourceHanSansSC;
        font-weight: 600;
        font-size: vh(21);
        color: #FFFFFF;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }

      .middle-chat-value {
        font-family: PangMenZhengDao;
        font-size: vh(45);
        color: #38CEFF;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin-top: vh(10);
      }
    }
  }

  .middle-chat-bottom {
    position: relative;
    flex: 1;
    margin: vh(0) vw(58) vh(32) vw(58);
  }

  .middle-pie-area {
    padding: vh(30) vw(110) vh(30) vw(110);
    position: relative;

    .pie-item {
      margin-right: vw(35);

      &:last-child {
        margin-right: 0;
      }

      .pie-data {
        position: relative;
        height: vh(130);
        width: vh(130);
        margin-bottom: vh(20);
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-radius: 50%;
        border: 2px solid #2a9adb;
        box-shadow: 0px 0px 10px 2px #188dd2;
        overflow: hidden;

        /* 定一个旋转动画 用于实现波浪效果 */
        @keyframes progressRotateLeft {
          0% {
            transform: rotate(0deg);
          }

          100% {
            transform: rotate(360deg);
          }
        }

        /* 定一个旋转动画 用于实现波浪效果 */
        @keyframes progressRotateRight {
          0% {
            transform: rotate(-90deg);
          }

          100% {
            transform: rotate(270deg);
          }
        }

        /* 设置进度条样式 */
        .progress-left {
          position: absolute;
          z-index: -1;
          /* 波浪占据外层圆形区域的百分比 由 --progress控制 */
          top: calc(100% - var(--progress));
          left: -65%;
          // transform: translateX(-50%);
          z-index: 9;
          width: 200%;
          height: 200%;
          border-radius: 45% 50% 50% 45%;
          background: linear-gradient(to right, #0869cf, #0550ca);
          /* 添加旋转动画效果 */
          animation: progressRotateLeft 8s linear infinite, top 1s linear infinite;
          /* 由于上面使用了transform 且动画中也使用了transform 设置该属性使其叠加生效 */
          animation-composition: add;
        }

        /* 设置进度条样式 */
        .progress-right {
          position: absolute;
          z-index: -1;
          /* 波浪占据外层圆形区域的百分比 由 --progress控制 */
          top: calc(100% - var(--progress));
          left: -35%;
          // transform: translateX(-50%);
          z-index: 9;
          width: 200%;
          height: 200%;
          border-radius: 40% 50% 40% 50%;
          background: rgba(100, 149, 237, 0.5);
          /* 添加旋转动画效果 */
          animation: progressRotateRight 10s linear infinite, top 1s linear infinite;
          /* 由于上面使用了transform 且动画中也使用了transform 设置该属性使其叠加生效 */
          animation-composition: add;
        }

        .pie-data-top {
          z-index: 999;
          font-family: SourceHanSansCN;
          font-weight: 700;
          font-size: vh(24);
          color: #FFFFFF;
          text-align: center;
          font-style: normal;
          text-transform: none;
          margin-bottom: vh(8);

          .pie-data-decimal {
            font-size: vh(15);
          }
        }

        .pie-data-bottom {
          z-index: 999;
          font-family: SourceHanSansCN;
          font-weight: 400;
          font-size: vh(13);
          color: #FFFFFF;
          text-align: center;
          font-style: normal;
          text-transform: none;
        }
      }

      .pie-title {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        height: vh(45);
        width: vw(207);

        .pie-title-text {
          margin-bottom: vh(30);
          font-family: SourceHanSansSC, SourceHanSansSC;
          font-weight: 400;
          font-size: vh(17);
          color: #1ACEFF;
          line-height: vh(21);
          font-style: normal;
          text-transform: none;
        }
      }
    }
  }

  .left-area {
    margin-right: vw(14);
    height: 100%;
    width: vw(422);
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .middle-area {
    flex: 2;

    .middle-chat {
      position: relative;
      margin-bottom: vh(23);
      height: vh(604);
      display: flex;
      flex-direction: column;
    }

    .middle-bottom {
      height: vh(290);
    }
  }

  .right-area {
    margin-left: vw(14);
    height: 100%;
    width: vw(422);
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .item-title {
    position: relative;
    background-size: 100%;
    height: vh(34);
    display: flex;
    align-items: center;

    .item-title-text {
      font-family: SourceHanSansSC;
      font-weight: 400;
      font-size: vh(18);
      color: #FFFFFF;
      text-align: left;
      font-style: normal;
      transform: skewX(-10deg);
      margin-left: vw(43);
      margin-bottom: vh(28);
      line-height: vw(34);
    }
  }

}
</style>
